<template>
  <div>
    <el-dialog
      title="添加居民"
      width="1200px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
    >
      <div class="dialogBody">
        <el-form
          :model="params"
          :rules="rules"
          inline
          ref="ruleForm"
          label-position="right"
          label-width="130px"
          size="small"
        >
          <div class="flexItem">
            <el-form-item label="居民姓名：" prop="userName">
              <el-input
                v-model="params.userName"
                placeholder="请输入居民姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="originator_tel">
              <el-input
                oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
                v-model="params.originator_tel"
                @blur="params.originator_tel = $event.target.value"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="证件类型：" prop="cardType">
              <el-select v-model="params.cardType" placeholder="请选择证件类型">
                <el-option label="身份证" value="1"> </el-option>
                <el-option label="护照" value="2"> </el-option>
                <el-option label="其他" value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码：" prop="idCard">
              <el-input
                v-model="params.idCard"
                placeholder="请输入证件号码"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="民族：" prop="nation">
              <el-select v-model="params.nation" placeholder="">
                <el-option label="汉族" :value="1"> </el-option>
                <el-option label="男" :value="2"> </el-option>
                <el-option label="女" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="性别：" prop="gender">
              <el-radio-group v-model="params.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="人口属性：" prop="ascribed">
              <el-select v-model="params.ascribed" placeholder="">
                <el-option label="原住民" :value="1"> </el-option>
                <el-option label="新居民" :value="2"> </el-option>
                <el-option label="流动人口" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="政治面貌：" prop="politics">
              <el-select v-model="params.politics" placeholder="">
                <el-option label="党员" :value="5"> </el-option>
                <el-option label="民主党派" :value="1"> </el-option>
                <el-option label="群众" :value="2"> </el-option>
                <el-option label="无党派人士" :value="3"> </el-option>
                <el-option label="其他" :value="4"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="迁入日期：" prop="date">
              <el-date-picker
                v-model="params.date"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="请选择迁入日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="户籍地址：">
              <el-input
                v-model="params.address"
                placeholder="请输入户籍地址"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="婚姻状况：">
              <el-select v-model="params.marital" placeholder="请选择婚姻状况">
                <el-option label="已婚" :value="1"> </el-option>
                <el-option label="未婚" :value="2"> </el-option>
                <el-option label="其他" :value="3"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="文化程度：">
              <el-select
                v-model="params.education"
                placeholder="请选择文化程度"
              >
                <el-option label="初中" :value="1"> </el-option>
                <el-option label="高中" :value="2"> </el-option>
                <el-option label="大专及以上" :value="3"> </el-option>
                <el-option label="其他" :value="4"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="宗教信仰：">
              <el-select v-model="params.religion" placeholder="请选择宗教信仰">
                <el-option label="佛教" :value="1"> </el-option>
                <el-option label="伊斯兰教" :value="2"> </el-option>
                <el-option label="基督教" :value="3"> </el-option>
                <el-option label="无信仰" :value="4"> </el-option>
                <el-option label="其他" :value="5"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="是否生育：">
              <el-select v-model="params.maternity" placeholder="请选择">
                <el-option label="是" :value="1"> </el-option>
                <el-option label="否" :value="2"> </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="工作单位：">
              <el-input
                v-model="params.work"
                placeholder="请输入工作单位"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flexItem">
            <el-form-item label="居民头像：" prop="cover">
              <UploadPhoto
                @onSuccess="onSuccess"
                :fileList="params.cover"
              ></UploadPhoto>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadPhoto from "@/components/UploadPhoto.vue";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    id: "",
  },
  data() {
    return {
      params: {
        userName: "",
        originator_tel: "",
        cardType: "",
        idCard: "",
        nation: "",
        gender: 1,
        ascribed: "",
        politics: "",
        date: "",
        address: "",
        marital: "",
        education: "",
        religion: "",
        maternity: "",
        work: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入居民姓名", trigger: "blur" },
        ],
        originator_tel: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        cardType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        idCard: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
          {
            pattern:
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "请输入正确的身份证号",
            trigger: "blur",
          },
        ],
        nation: [{ required: true, message: "请选择民族", trigger: "change" }],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        ascribed: [
          { required: true, message: "请选择人口属性", trigger: "change" },
        ],
        politics: [
          { required: true, message: "请选择政治面貌", trigger: "change" },
        ],
        date: [
          {
            required: true,
            message: "请选择迁入日期",
            trigger: "change",
          },
        ],
      },
    };
  },

  components: { UploadPhoto },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   saveActive(params).then((res) => {
          //     if (res.code == 200) {
          //       this.$message({
          //         type: "success",
          //         message: res.msg,
          //       });
          //       this.$emit("handleClose", true);
          //     }
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang='scss' scoped>
.dialogBody {
  /deep/.flexItem {
    display: flex;
    .el-form-item {
      flex: 1;
    }
    .el-input__inner {
      width: 400px;
    }
    .el-range-editor.el-input__inner {
      width: 350px;
    }
  }
}
</style>